<template>
<!-- 歌单 -->
  <el-container style="margin-bottom: 55px;">
    <el-header>
      <p>
        热门标签:
        <span id="cats" v-for="(item,index) in hotMusicListTags" :class="'cat'+index"
              @click="changeMusicListCat(item.name,index)"
              style="margin-left: 25px;cursor: pointer;">{{ item.name }}</span>
      </p>
    </el-header>

    <el-main>
      <el-row :gutter="10">
        <el-col :span="4" v-for="(item,index) in goodMusicList" style="margin-top: 20px;position:relative;"
                :key="index">

          <!--播放量-->
          <div style="background: rgba(128,128,128,0.2);color: white;width: 96%;position:absolute;z-index: 10;">
            <div style="float:right;">
              <i class="el-icon-headset" style="margin-right: 5px;"></i>
              {{ item.playCount >= 10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }}
            </div>
          </div>
          <!--图片-->
          <div>
            <el-image :src="item.coverImgUrl" @click="toSongListPage(item.id)"
                      style="box-shadow: 0 0 2px 2px gray;border-radius: 10px;cursor: pointer">
            </el-image>
          </div>
          <!--点击-->
          <h1 @click="toSongListPage(item.id)" style="cursor:pointer;">{{ item.name }}</h1>

        </el-col>
      </el-row>
      <!--分页-->
      <!--layout表示需要显示的内容，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表-->
      <!--page-size	每页显示条目个数-->
      <el-pagination style="margin-top: 50px;text-align: center"
          layout="prev, pager, next" :page-size="queryInfo.limit" background
          :current-page.sync="currentPage"
          :total="goodMusicListTotal" @current-change="handleCurrentChange">
      </el-pagination>

    </el-main>
  </el-container>

</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      //精品歌单分类查询条件
      queryInfo: {
        cat: '全部',
        limit: 24,
        offset: 0,
      },
      //热门歌单分类标签
      hotMusicListTags: [],
      //精品歌单的列表
      goodMusicList: [],
      //精品歌单的总数
      goodMusicListTotal: 0,
      //上一次被点击过的分类标签
      prevClickCat: ''
    }
  },
  created() {
    //获取热门歌单标签信息
    this.getHotMusicListTags()
    //获取精品歌单
    this.getGoodMusicList()
  },
  methods: {
    //获取热门歌单标签信息
    getHotMusicListTags() {
      this.$http.get('playlist/hot').then(res => {
        this.hotMusicListTags = res.data.tags
      })
    },
    //获取精品歌单
    getGoodMusicList() {
      this.$http.get('/top/playlist', {params: this.queryInfo}).then(res => {
        this.goodMusicList = res.data.playlists
        this.goodMusicListTotal = res.data.total
      })
    },
    //分页插件页数改变(即切换页数)
    handleCurrentChange(newPage) {
      // 修改偏正值
      this.queryInfo.offset = (newPage - 1) * this.queryInfo.limit
      // 重新发送请求获取数据
      this.getGoodMusicList();
    },
    //点击歌单跳转界面
    toSongListPage(id) {
      this.$router.push('/songlist/' + id)
    },
    //点击标签筛选(index+jquery辅助我们切换点击后的文本的样式)
    changeMusicListCat(newCat, index) {
      // 如果点击的是原来的标签且页数刚好是第一页则不查询直接返回
      if (this.currentPage === 1 && this.prevClickCat === 'cat' + index) {
        return
      }
      // 记录上次点击的标签 上面用来优化使用
      this.prevClickCat = 'cat' + index
      //设置查询条件的标签筛选
      this.queryInfo.cat = newCat
      //设置新被点击的标签的颜色
      this.$('.cat' + index).css('color', 'red')
      this.$('.cat' + index).siblings('span').css('color','')
      // 改变标签时回到第一页状态再往下查询数据
      if (this.queryInfo.offset != 0) {
        this.currentPage = 1
        this.queryInfo.offset = 0
      }
      // 发送请求，查询数据
      this.getGoodMusicList()
    }
  }
}
</script>

<style lang="less" scoped>
[class*=el-col-] {
  display: inline-block;
  float: none;
}

h1 {
  font-weight: 500;
}

#cats:hover {
  color: red
}

/*被点击的分类标签类名变成这个*/
.activeCat {
  color: red;
}
</style>
